﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>Angular Ajax</title>
    <link href="~/Content/Site.css" rel="stylesheet" />    
</head>
<body ng-controller="AppController">

    Cliente Selecionado<br />
    <br />
    Nome: {{nome}}<br />
    <br />
    <br />
    Lista de Clientes
    <br />

    <div class="tabela">
        <div class="linha" ng-repeat="cliente in clientes">
            <div class="celula" ng-click="mostrar(cliente);">{{cliente.Nome}}</div>
        </div>
    </div>

    <input id="carregar" type="button" value="Carregar" ng-click="carregar()" />

    <script src="~/Scripts/angular.js"></script>
    <script>
        function AppController($scope, $http) {
            $scope.mostrar = function (modelo) {
                $scope.nome = modelo.Nome;
            }

            $scope.carregar = function () {
                $http.get("@Url.Action("DadosAjax")").success(function (dados) {
                    $scope.clientes = dados;
                });
            }
        }
    </script>
</body>
</html>
